<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title>个人中心</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/common.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/aui-pull-refresh.css" />
    <style>
        html,
        body {
            width: 100%;
            min-height: 100%;
            background: #ffffff;
            line-height: 1;
        }

        img {
            width: 22px;
            margin: auto;
        }

        .aui-bar-tab-label {
            font-size: 0.5rem!important;
            padding-top: 4px;
            top: 1px;
        }

        .check_active {
            color: #ff0036;
        }
        /*遮罩层*/

        .cover {
            display: none;
            position: fixed;
            background-color: rgba(0, 0, 0, .2);
            width: 100vw;
            height: 2.5rem;
            bottom: 0;
            z-index: 10;
        }
    </style>
</head>

<body>
    <footer class="aui-bar aui-bar-tab aui-border-t" id="footer">
        <div class="aui-bar-tab-item" tapmode>
            <div class="aui-dot aui-hide"></div>
            <img src="../../image/four/chat_off.png" alt="">
            <div class="aui-bar-tab-label">聊天</div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <img src="../../image/four/mail_off.png" alt="">
            <div class="aui-bar-tab-label">通讯录</div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <!-- <div class="aui-badge">99</div> -->
            <img src="../../image/four/friend_on.png" alt="">
            <div class="aui-bar-tab-label check_active">朋友圈</div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <!-- <div class="aui-badge">99</div> -->
            <img src="../../image/four/shop_off.png" alt="">
            <div class="aui-bar-tab-label">商城</div>
        </div>
        <div class="aui-bar-tab-item" tapmode>
            <!-- <div class="aui-dot"></div> -->
            <img src="../../image/four/mine_off.png" alt="">
            <div class="aui-bar-tab-label">我的</div>
        </div>
    </footer>

    <!-- 底部遮罩层 -->
    <div class="cover"></div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/utils.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/aui-tab.js"></script>
<script type="text/javascript" src="../../script/aui-scroll.js"></script>
<script type="text/javascript" src="../../script/aui-pull-refresh.js"></script>
<script type="text/javascript">
    apiready = function() {


        //获取底部footer的高度
        var oFooter = $api.byId("footer");
        var footerH = $api.offset(oFooter).h;
        //窗口打开后加载社交模块页面
        open_framegroup(footerH);

        // 监听返回事件
        api.addEventListener({
            name: 'keyback'
        }, function(ret, err) {
            if (ret) {
                //  alert( JSON.stringify( ret ) );
                api.closeWin({});
                api.sendEvent({
                    name: 'close_four',
                    extra: {
                        close: true,
                        index: 3
                    }
                });

            } else {
                //  alert( JSON.stringify( err ) );
            }
        });

        // 初始化融云
        var rong = api.require('rongCloud2');
        rong.init(function(ret, err) {
            if (ret.status == 'success') {
                console.log('初始化融云成功了')
            } else {
                api.toast({
                    msg: err.code
                });
            }
        });
        // 连接融云
        rong.connect({
            token: $api.getStorage('rong-token')
        }, function(ret, err) {
            if (ret.status == 'success') {
                // console.log('融云连接成功——————————' + JSON.stringify(ret));
            } else {
                alert(err.code)
            }
        });


        // 获取未读消息总数
        rong.getUnreadCountByConversationTypes({
            conversationTypes: ['PRIVATE', 'GROUP']
        }, function(ret, err) {
            if (ret) {
                if (ret.result != 0) {
                    add_tips_dot();
                } else {
                    remove_tips_dot();
                }
            }
        })


        api.addEventListener({
            name: 'new_msg_event'
        }, function(ret, err) {
            if (ret) {
              add_tips_dot();
            } else {
                alert(JSON.stringify(err));
            }
        });


    };

    // 底部点击切换frame
    var tab = new auiTab({
        element: document.getElementById("footer"),
        index: 3,
        repeatClick: true
    }, function(ret) {
        switch (ret.index) {
            case 1:
                open_frame(ret.index - 1)
                break;
            case 2:
                open_frame(ret.index - 1)
                break;
            case 3:
                open_frame(ret.index - 1)
                break;
            case 4:
                open_frame(ret.index - 1)
                break;
            case 5:
                open_frame(ret.index - 1)
                break;
            default:
                open_frame(ret.index - 1)
                break;
        }
    });


    //打开社交模块的所有页面
    function open_framegroup(footerH) {
        api.openFrameGroup({
            name: 'social_contact',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: api.winHeight - footerH
            },
            scrollEnabled: false,
            preload: 3,
            index: 2,
            frames: [{
                name: 'chat_list',
                url: 'chat_list.html',
                bgColor: '#f7f7f7',
                // bounces:true
            }, {
                name: 'mail_list',
                url: 'mail_list.html',
                bgColor: '#f7f7f7',
                // bounces:true
            }, {
                name: 'friend_list',
                url: 'friend_list.html',
                bgColor: '#f7f7f7',
                // bounces:true
            }]
        }, function(ret, err) {

        });
    }


    function open_frame(frm_index) {

        //切换图标  修改图标颜色

        var frm_name = ['chat', 'mail', 'friend', 'shop', 'mine'];

        for (var i = 0; i < 5; i++) {
            if (i == frm_index) {
                $('.aui-bar-tab-item').eq(i).find('img').prop('src', '../../image/four/' + frm_name[i] + '_on.png')
                $('.aui-bar-tab-item').eq(i).find('div').addClass('check_active')
            } else {
                $('.aui-bar-tab-item').eq(i).find('img').prop('src', '../../image/four/' + frm_name[i] + '_off.png')
                $('.aui-bar-tab-item').eq(i).find('div').removeClass('check_active')
            }
        }


        if (frm_index == 3 || frm_index == 4) {
            api.closeWin({});
            api.sendEvent({
                name: 'close_four',
                extra: {
                    close: true,
                    index: frm_index
                }
            });
        }

        // 设置对应的frm为可见状态
        api.setFrameGroupIndex({
            name: 'social_contact',
            reload: true,
            index: frm_index
        });

    }


    // 添加遮罩
    function add_cover(bg_color) {
        $('.cover').show();
        $('.cover').css('background-color', bg_color);
    }
    // 移除遮罩
    function remove_cover() {
        $('.cover').hide();
    }


    // 有未读消息
    function add_tips_dot() {
        $('.aui-dot').removeClass('aui-hide');
    }
    // 无未读消息
    function remove_tips_dot() {
        $('.aui-dot').addClass('aui-hide');
    }
</script>

</html>
